<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="generator" content="VuePress 2.0.0-beta.51">
    <script>
      (function() {
        const userMode = localStorage.getItem('vuepress-reco-color-scheme') || 'auto';
        const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

        if (userMode === 'dark' || (userMode === 'auto' && systemDarkMode)) {
          document.documentElement.classList.toggle('dark', true);
        }
      })();
    </script>
    <link rel="icon" href="/blog/images/logo.png"><link rel="stylesheet" href="/blog/css/common.scss"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"><script language="javascript" type="text/javascript" src="/blog/js/jquery.min.js"></script><title>四、Vue常用特性 | hhのBlog</title><meta name="description" content="A blog about work and life">
    <link rel="modulepreload" href="/blog/assets/app.af94fc38.js"><link rel="modulepreload" href="/blog/assets/Vue2_2022111204.html.0d2896ce.js"><link rel="modulepreload" href="/blog/assets/Vue2_2022111204.html.e10b7300.js"><link rel="prefetch" href="/blog/assets/index.html.66bbb558.js"><link rel="prefetch" href="/blog/assets/demo.html.5b7805fb.js"><link rel="prefetch" href="/blog/assets/20221108.html.f09e60bb.js"><link rel="prefetch" href="/blog/assets/Canvas_2022111301.html.ec3c03ed.js"><link rel="prefetch" href="/blog/assets/Canvas_2022111302.html.f6e335a9.js"><link rel="prefetch" href="/blog/assets/Canvas_2022111303.html.c0dc6265.js"><link rel="prefetch" href="/blog/assets/CSS_2022111401.html.5f0453af.js"><link rel="prefetch" href="/blog/assets/20221108.html.4bd4ca47.js"><link rel="prefetch" href="/blog/assets/20221115.html.324de47f.js"><link rel="prefetch" href="/blog/assets/20221116.html.0d3a3d59.js"><link rel="prefetch" href="/blog/assets/js01example.html.7d266980.js"><link rel="prefetch" href="/blog/assets/js01基础.html.0408303d.js"><link rel="prefetch" href="/blog/assets/js02域名.html.2f781f87.js"><link rel="prefetch" href="/blog/assets/js03保留小数.html.52d104e4.js"><link rel="prefetch" href="/blog/assets/js04常用正则.html.91ba30f3.js"><link rel="prefetch" href="/blog/assets/js05定时器.html.3304c7db.js"><link rel="prefetch" href="/blog/assets/01相关命令.html.d137a3a8.js"><link rel="prefetch" href="/blog/assets/NodeJs_2022111301.html.a182f227.js"><link rel="prefetch" href="/blog/assets/NodeJs_2022111302.html.da1bce3a.js"><link rel="prefetch" href="/blog/assets/NodeJs_2022111303.html.d48c88c8.js"><link rel="prefetch" href="/blog/assets/NodeJs_2022111304.html.82c5514a.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111201.html.440c0e4b.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111202.html.e6a8a1db.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111203.html.f1426fe0.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111205.html.4103afd7.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111206.html.d2a54f87.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111207.html.3e95d323.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111208.html.e09e295e.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111209.html.2b200f73.js"><link rel="prefetch" href="/blog/assets/Vue3_2022111301.html.21919b21.js"><link rel="prefetch" href="/blog/assets/Vue_2022111301.html.ef40b3e0.js"><link rel="prefetch" href="/blog/assets/Vuex_2022111301.html.86e597e2.js"><link rel="prefetch" href="/blog/assets/Vuex_2022111302.html.7e66ee69.js"><link rel="prefetch" href="/blog/assets/Vuex_2022111303.html.631f3db6.js"><link rel="prefetch" href="/blog/assets/vue2-10-下载文件流.html.f941e773.js"><link rel="prefetch" href="/blog/assets/2023.html.9b68f9e4.js"><link rel="prefetch" href="/blog/assets/info.html.a848c235.js"><link rel="prefetch" href="/blog/assets/guide.html.e425151d.js"><link rel="prefetch" href="/blog/assets/前端技术集合.html.cf2a3b37.js"><link rel="prefetch" href="/blog/assets/index.html.d2d3b8ef.js"><link rel="prefetch" href="/blog/assets/01简介.html.40ba5a67.js"><link rel="prefetch" href="/blog/assets/Button.html.8c129817.js"><link rel="prefetch" href="/blog/assets/api.html.e0d147e4.js"><link rel="prefetch" href="/blog/assets/home.html.e1e35d1b.js"><link rel="prefetch" href="/blog/assets/home1.html.e4c04026.js"><link rel="prefetch" href="/blog/assets/home2.html.58a624a1.js"><link rel="prefetch" href="/blog/assets/plugin.html.b944638b.js"><link rel="prefetch" href="/blog/assets/theme.html.5ff8341a.js"><link rel="prefetch" href="/blog/assets/info.html.de54f66c.js"><link rel="prefetch" href="/blog/assets/mac上使用iterm2.html.93ceff56.js"><link rel="prefetch" href="/blog/assets/账号网站合集.html.8f9d6378.js"><link rel="prefetch" href="/blog/assets/面试题2022111401.html.475fb69e.js"><link rel="prefetch" href="/blog/assets/info.html.3ee938b6.js"><link rel="prefetch" href="/blog/assets/overtime.html.a3b609ca.js"><link rel="prefetch" href="/blog/assets/password.html.f40ffe93.js"><link rel="prefetch" href="/blog/assets/project.html.e6805471.js"><link rel="prefetch" href="/blog/assets/实验室检测.html.8cf7547b.js"><link rel="prefetch" href="/blog/assets/智慧检测平台.html.dd52a4be.js"><link rel="prefetch" href="/blog/assets/跨维产品菜单整理20230203.html.450b6471.js"><link rel="prefetch" href="/blog/assets/404.html.98e87f94.js"><link rel="prefetch" href="/blog/assets/index.html.72ac4063.js"><link rel="prefetch" href="/blog/assets/index.html.8cbdf524.js"><link rel="prefetch" href="/blog/assets/index.html.ce338eac.js"><link rel="prefetch" href="/blog/assets/index.html.73c4a578.js"><link rel="prefetch" href="/blog/assets/index.html.d75650eb.js"><link rel="prefetch" href="/blog/assets/index.html.c5770dab.js"><link rel="prefetch" href="/blog/assets/index.html.d5122042.js"><link rel="prefetch" href="/blog/assets/index.html.c0a5e9ba.js"><link rel="prefetch" href="/blog/assets/index.html.51ae8525.js"><link rel="prefetch" href="/blog/assets/index.html.e53514d3.js"><link rel="prefetch" href="/blog/assets/index.html.09988c79.js"><link rel="prefetch" href="/blog/assets/index.html.eb108376.js"><link rel="prefetch" href="/blog/assets/index.html.2f61b3ca.js"><link rel="prefetch" href="/blog/assets/index.html.08946a35.js"><link rel="prefetch" href="/blog/assets/index.html.e695e9c9.js"><link rel="prefetch" href="/blog/assets/index.html.3d66ccdd.js"><link rel="prefetch" href="/blog/assets/index.html.1ff935f2.js"><link rel="prefetch" href="/blog/assets/index.html.a3ad1cd1.js"><link rel="prefetch" href="/blog/assets/index.html.b57762aa.js"><link rel="prefetch" href="/blog/assets/index.html.08b3a957.js"><link rel="prefetch" href="/blog/assets/index.html.9cbf2d78.js"><link rel="prefetch" href="/blog/assets/index.html.4bc70fa1.js"><link rel="prefetch" href="/blog/assets/index.html.faf16132.js"><link rel="prefetch" href="/blog/assets/demo.html.a850e9b9.js"><link rel="prefetch" href="/blog/assets/20221108.html.46471f50.js"><link rel="prefetch" href="/blog/assets/Canvas_2022111301.html.a5e91418.js"><link rel="prefetch" href="/blog/assets/Canvas_2022111302.html.ff7102b1.js"><link rel="prefetch" href="/blog/assets/Canvas_2022111303.html.bd8b572a.js"><link rel="prefetch" href="/blog/assets/CSS_2022111401.html.be8e29c7.js"><link rel="prefetch" href="/blog/assets/20221108.html.9e6fc05c.js"><link rel="prefetch" href="/blog/assets/20221115.html.5e544c67.js"><link rel="prefetch" href="/blog/assets/20221116.html.663a1bdb.js"><link rel="prefetch" href="/blog/assets/js01example.html.e7f57aff.js"><link rel="prefetch" href="/blog/assets/js01基础.html.2e918579.js"><link rel="prefetch" href="/blog/assets/js02域名.html.d1b1bae3.js"><link rel="prefetch" href="/blog/assets/js03保留小数.html.f3c8d2f4.js"><link rel="prefetch" href="/blog/assets/js04常用正则.html.4266e782.js"><link rel="prefetch" href="/blog/assets/js05定时器.html.444cce0c.js"><link rel="prefetch" href="/blog/assets/01相关命令.html.81697624.js"><link rel="prefetch" href="/blog/assets/NodeJs_2022111301.html.1f3a3c9d.js"><link rel="prefetch" href="/blog/assets/NodeJs_2022111302.html.db8d0905.js"><link rel="prefetch" href="/blog/assets/NodeJs_2022111303.html.3ab1d537.js"><link rel="prefetch" href="/blog/assets/NodeJs_2022111304.html.f4686d41.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111201.html.b263cecf.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111202.html.348b7b89.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111203.html.047acc5f.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111205.html.9768009b.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111206.html.f1e0fa5e.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111207.html.9b090633.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111208.html.daad8d06.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111209.html.7fedd35c.js"><link rel="prefetch" href="/blog/assets/Vue3_2022111301.html.21fe75fc.js"><link rel="prefetch" href="/blog/assets/Vue_2022111301.html.2d5e0d45.js"><link rel="prefetch" href="/blog/assets/Vuex_2022111301.html.60c6a791.js"><link rel="prefetch" href="/blog/assets/Vuex_2022111302.html.751868dc.js"><link rel="prefetch" href="/blog/assets/Vuex_2022111303.html.3fa18bdf.js"><link rel="prefetch" href="/blog/assets/vue2-10-下载文件流.html.b6206ee7.js"><link rel="prefetch" href="/blog/assets/2023.html.0936ae58.js"><link rel="prefetch" href="/blog/assets/info.html.a1a68d8b.js"><link rel="prefetch" href="/blog/assets/guide.html.8a368790.js"><link rel="prefetch" href="/blog/assets/前端技术集合.html.9ca234a3.js"><link rel="prefetch" href="/blog/assets/index.html.edaee29a.js"><link rel="prefetch" href="/blog/assets/01简介.html.5ef2778e.js"><link rel="prefetch" href="/blog/assets/Button.html.af92d008.js"><link rel="prefetch" href="/blog/assets/api.html.f4fa47e2.js"><link rel="prefetch" href="/blog/assets/home.html.e09d15f1.js"><link rel="prefetch" href="/blog/assets/home1.html.08d478e3.js"><link rel="prefetch" href="/blog/assets/home2.html.0a335270.js"><link rel="prefetch" href="/blog/assets/plugin.html.bc46a390.js"><link rel="prefetch" href="/blog/assets/theme.html.73112f00.js"><link rel="prefetch" href="/blog/assets/info.html.b09899b8.js"><link rel="prefetch" href="/blog/assets/mac上使用iterm2.html.129f6a2b.js"><link rel="prefetch" href="/blog/assets/账号网站合集.html.f39ea8dc.js"><link rel="prefetch" href="/blog/assets/面试题2022111401.html.51141716.js"><link rel="prefetch" href="/blog/assets/info.html.8f33962c.js"><link rel="prefetch" href="/blog/assets/overtime.html.6b269d77.js"><link rel="prefetch" href="/blog/assets/password.html.1ccccfa6.js"><link rel="prefetch" href="/blog/assets/project.html.1ac0116d.js"><link rel="prefetch" href="/blog/assets/实验室检测.html.811b00ea.js"><link rel="prefetch" href="/blog/assets/智慧检测平台.html.74f12da9.js"><link rel="prefetch" href="/blog/assets/跨维产品菜单整理20230203.html.d8e60b11.js"><link rel="prefetch" href="/blog/assets/404.html.761b14a0.js"><link rel="prefetch" href="/blog/assets/index.html.3156a3ca.js"><link rel="prefetch" href="/blog/assets/index.html.0ac8c580.js"><link rel="prefetch" href="/blog/assets/index.html.17c3e87f.js"><link rel="prefetch" href="/blog/assets/index.html.11c9aab7.js"><link rel="prefetch" href="/blog/assets/index.html.4e5ab5fd.js"><link rel="prefetch" href="/blog/assets/index.html.800eacc8.js"><link rel="prefetch" href="/blog/assets/index.html.65e76f2c.js"><link rel="prefetch" href="/blog/assets/index.html.3b91d0bf.js"><link rel="prefetch" href="/blog/assets/index.html.59b51092.js"><link rel="prefetch" href="/blog/assets/index.html.f939c3c1.js"><link rel="prefetch" href="/blog/assets/index.html.de2abe69.js"><link rel="prefetch" href="/blog/assets/index.html.739bd11b.js"><link rel="prefetch" href="/blog/assets/index.html.2d86bd8b.js"><link rel="prefetch" href="/blog/assets/index.html.b093f5ce.js"><link rel="prefetch" href="/blog/assets/index.html.c0a0758f.js"><link rel="prefetch" href="/blog/assets/index.html.3ec16541.js"><link rel="prefetch" href="/blog/assets/index.html.72ba4570.js"><link rel="prefetch" href="/blog/assets/index.html.67fe3a27.js"><link rel="prefetch" href="/blog/assets/index.html.28a05aba.js"><link rel="prefetch" href="/blog/assets/index.html.5342a2c2.js"><link rel="prefetch" href="/blog/assets/index.html.c1a1958b.js"><link rel="prefetch" href="/blog/assets/index.html.267fccd4.js"><link rel="prefetch" href="/blog/assets/reco-valine.ed4545b0.js"><link rel="prefetch" href="/blog/assets/Button.a2ab7687.js"><link rel="prefetch" href="/blog/assets/Demo.3e2abc15.js"><link rel="prefetch" href="/blog/assets/setupDevtools-EXVHPMXB.8c234e79.js">
    <link rel="stylesheet" href="/blog/assets/style.0a08fff0.css">
  </head>
  <body>
    <div id="app"><!--[--><div class="theme-container"><div class="common-wrapper"><div><header class="navbar-container"><span class="nav-item site-brand"><a href="/blog/" class=""><img class="logo" src="/blog/images/logo.png" alt="hhのBlog"><span class="site-name can-hide">hhのBlog</span></a></span><div class="nav-item navbar-links-wrapper" style=""><form class="search-box" role="search"><input type="search" autocomplete="off" spellcheck="false" value><!----></form><nav class="navbar-links"><!--[--><div class="navbar-links-item"><a href="/blog/" class="nav-link" aria-label="Home"><!--[--><!--]--> Home <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/blog/categories/ToDoList/1/" class="nav-link" aria-label="Notes"><!--[--><!--]--> Notes <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/blog/tags/Vue/1/" class="nav-link" aria-label="Tags"><!--[--><!--]--> Tags <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/blog/docs/" class="nav-link" aria-label="work"><!--[--><!--]--> work <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/blog/blogs/_List/info.html" class="nav-link" aria-label="周计划清单"><!--[--><!--]--> 周计划清单 <!--[--><!--]--></a></div><!--]--></nav><a class="icon-container left btn-toggle-dark-mode" href="javascript:void(0)" target="_self"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" style="color:inherit;width:19px;height:19px;font-size:19px;"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3h.393a7.5 7.5 0 0 0 7.92 12.446A9 9 0 1 1 12 2.992z"></path><path d="M17 4a2 2 0 0 0 2 2a2 2 0 0 0-2 2a2 2 0 0 0-2-2a2 2 0 0 0 2-2"></path><path d="M19 11h2m-1-1v2"></path></g></svg><!----></a><a class="icon-container left btn-toggle-menus" href="javascript:void(0)" target="_self"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" style="color:inherit;width:20px;height:20px;font-size:20px;"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="19" r="1"></circle><circle cx="12" cy="5" r="1"></circle></g></svg><!----></a></div></header><div class="mobile-menus-container"><nav class="navbar-links"><!--[--><div class="navbar-links-item"><a href="/blog/" class="nav-link" aria-label="Home"><!--[--><!--]--> Home <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/blog/categories/ToDoList/1/" class="nav-link" aria-label="Notes"><!--[--><!--]--> Notes <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/blog/tags/Vue/1/" class="nav-link" aria-label="Tags"><!--[--><!--]--> Tags <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/blog/docs/" class="nav-link" aria-label="work"><!--[--><!--]--> work <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/blog/blogs/_List/info.html" class="nav-link" aria-label="周计划清单"><!--[--><!--]--> 周计划清单 <!--[--><!--]--></a></div><!--]--></nav><div class="appearance"><span>Appearance </span><a class="icon-container left btn-toggle-dark-mode" href="javascript:void(0)" target="_self"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" style="color:inherit;width:19px;height:19px;font-size:19px;"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3h.393a7.5 7.5 0 0 0 7.92 12.446A9 9 0 1 1 12 2.992z"></path><path d="M17 4a2 2 0 0 0 2 2a2 2 0 0 0-2 2a2 2 0 0 0-2-2a2 2 0 0 0 2-2"></path><path d="M19 11h2m-1-1v2"></path></g></svg><!----></a></div></div><div class="sidebar-mask"></div><aside class="series-container"><!--[--><!--[--><section class="series-group series-item"><h5 class="series-heading">Vue问题记录</h5><ul><li><!--[--><a href="/blog/blogs/Vue/vue2-10-xiazaiwenjianliu.html" class="nav-link series-item" aria-label="下载文件流"><!--[--><!--]--> 下载文件流 <!--[--><!--]--></a><!--]--></li><li><!--[--><a href="/blog/blogs/Vue/Vue2_2022111201" class="nav-link series-item" aria-label="数组"><!--[--><!--]--> 数组 <!--[--><!--]--></a><!--]--></li><li><!--[--><a href="/blog/blogs/Vue/Vue2_2022111201.html" class="nav-link series-item" aria-label="一、Vue概述"><!--[--><!--]--> 一、Vue概述 <!--[--><!--]--></a><!--]--></li><li><!--[--><a href="/blog/blogs/Vue/Vue2_2022111202.html" class="nav-link series-item" aria-label="二、Vue基本使用"><!--[--><!--]--> 二、Vue基本使用 <!--[--><!--]--></a><!--]--></li><li><!--[--><a href="/blog/blogs/Vue/Vue2_2022111201" class="nav-link series-item" aria-label="对象"><!--[--><!--]--> 对象 <!--[--><!--]--></a><!--]--></li><li><!--[--><a href="/blog/blogs/Vue/Vue2_2022111201.html" class="nav-link series-item" aria-label="一、Vue概述"><!--[--><!--]--> 一、Vue概述 <!--[--><!--]--></a><!--]--></li><li><!--[--><a href="/blog/blogs/Vue/Vue2_2022111202.html" class="nav-link series-item" aria-label="二、Vue基本使用"><!--[--><!--]--> 二、Vue基本使用 <!--[--><!--]--></a><!--]--></li><li><!--[--><a href="/blog/blogs/Vue/Vue2_2022111201" class="nav-link series-item" aria-label="表单"><!--[--><!--]--> 表单 <!--[--><!--]--></a><!--]--></li><li><!--[--><a href="/blog/blogs/Vue/Vue2_2022111201" class="nav-link series-item" aria-label="实操"><!--[--><!--]--> 实操 <!--[--><!--]--></a><!--]--></li><li><!--[--><a href="/blog/blogs/Vue/Vue2_2022111201" class="nav-link series-item" aria-label="其他"><!--[--><!--]--> 其他 <!--[--><!--]--></a><!--]--></li><li><!--[--><a href="/blog/blogs/Vue/Vue_2022111301.html" class="nav-link series-item" aria-label="初始化Vue项目"><!--[--><!--]--> 初始化Vue项目 <!--[--><!--]--></a><!--]--></li></ul></section><!--]--><!--[--><section class="series-group series-item"><h5 class="series-heading active">Vue学习</h5><ul><li><!--[--><a href="/blog/blogs/Vue/Vue2_2022111201" class="nav-link series-item" aria-label="Vue2全家桶"><!--[--><!--]--> Vue2全家桶 <!--[--><!--]--></a><!--]--></li><li><!--[--><a href="/blog/blogs/Vue/Vue2_2022111201.html" class="nav-link series-item" aria-label="一、Vue概述"><!--[--><!--]--> 一、Vue概述 <!--[--><!--]--></a><!--]--></li><li><!--[--><a href="/blog/blogs/Vue/Vue2_2022111202.html" class="nav-link series-item" aria-label="二、Vue基本使用"><!--[--><!--]--> 二、Vue基本使用 <!--[--><!--]--></a><!--]--></li><li><!--[--><a href="/blog/blogs/Vue/Vue2_2022111203.html" class="nav-link series-item" aria-label="三、Vue模版语法"><!--[--><!--]--> 三、Vue模版语法 <!--[--><!--]--></a><!--]--></li><li><!--[--><a aria-current="page" href="/blog/blogs/Vue/Vue2_2022111204.html" class="router-link-active router-link-exact-active nav-link router-link-active series-item active" aria-label="四、Vue常用特性"><!--[--><!--]--> 四、Vue常用特性 <!--[--><!--]--></a><!--]--></li><li><!--[--><a href="/blog/blogs/Vue/Vue2_2022111205.html" class="nav-link series-item" aria-label="五、组件化开发"><!--[--><!--]--> 五、组件化开发 <!--[--><!--]--></a><!--]--></li><li><!--[--><a href="/blog/blogs/Vue/Vue2_2022111206.html" class="nav-link series-item" aria-label="六、前后端交互"><!--[--><!--]--> 六、前后端交互 <!--[--><!--]--></a><!--]--></li><li><!--[--><a href="/blog/blogs/Vue/Vue2_2022111207.html" class="nav-link series-item" aria-label="七、前端路由"><!--[--><!--]--> 七、前端路由 <!--[--><!--]--></a><!--]--></li><li><!--[--><a href="/blog/blogs/Vue/Vue2_2022111208.html" class="nav-link series-item" aria-label="八、前端工程化"><!--[--><!--]--> 八、前端工程化 <!--[--><!--]--></a><!--]--></li><li><!--[--><a href="/blog/blogs/Vue/Vue2_2022111209.html" class="nav-link series-item" aria-label="九、其他"><!--[--><!--]--> 九、其他 <!--[--><!--]--></a><!--]--></li><li><!--[--><a href="/blog/blogs/Vue/Vuex_2022111301" class="nav-link series-item" aria-label="Vuex"><!--[--><!--]--> Vuex <!--[--><!--]--></a><!--]--></li><li><!--[--><a href="/blog/blogs/Vue/Vuex_2022111301.html" class="nav-link series-item" aria-label="一、Vuex概述"><!--[--><!--]--> 一、Vuex概述 <!--[--><!--]--></a><!--]--></li><li><!--[--><a href="/blog/blogs/Vue/Vuex_2022111302.html" class="nav-link series-item" aria-label="二、Vuex的基本使用"><!--[--><!--]--> 二、Vuex的基本使用 <!--[--><!--]--></a><!--]--></li><li><!--[--><a href="/blog/blogs/Vue/Vuex_2022111303.html" class="nav-link series-item" aria-label="三、Vuex的核心概念"><!--[--><!--]--> 三、Vuex的核心概念 <!--[--><!--]--></a><!--]--></li><li><!--[--><a href="/blog/blogs/Vue/Vue3_2022111301" class="nav-link series-item" aria-label="Vue3"><!--[--><!--]--> Vue3 <!--[--><!--]--></a><!--]--></li><li><!--[--><a href="/blog/blogs/Vue/Vue3_2022111301.html" class="nav-link series-item" aria-label="Vue3啦啦啦"><!--[--><!--]--> Vue3啦啦啦 <!--[--><!--]--></a><!--]--></li></ul></section><!--]--><!--]--></aside><!--[--><main class="page-container show-series show-catalog"><h1 class="page-title">四、Vue常用特性</h1><div class="page-info"><a class="icon-container left" href="javascript:void(0)" target="_self"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" style="color:inherit;width:18px;height:18px;font-size:18px;"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="7" r="4"></circle><path d="M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2"></path></g></svg><span style="color:inherit;font-size:14px;" class="icon-text"><!--[-->hh<!--]--></span></a><a class="icon-container left" href="javascript:void(0)" target="_self"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" style="color:inherit;width:18px;height:18px;font-size:18px;"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M12 7v5l3 3"></path></g></svg><span style="color:inherit;font-size:14px;" class="icon-text"><!--[-->2022-11-12 11:00:00<!--]--></span></a><a class="icon-container left" href="javascript:void(0)" target="_self"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" style="color:inherit;width:18px;height:18px;font-size:18px;"><path d="M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg><span style="color:inherit;font-size:14px;" class="icon-text"><!--[-->前端<!--]--></span></a><a class="icon-container left" href="javascript:void(0)" target="_self"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" style="color:inherit;width:18px;height:18px;font-size:18px;"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="8.5" cy="8.5" r="1" fill="currentColor"></circle><path d="M4 7v3.859c0 .537.213 1.052.593 1.432l8.116 8.116a2.025 2.025 0 0 0 2.864 0l4.834-4.834a2.025 2.025 0 0 0 0-2.864L12.29 4.593A2.025 2.025 0 0 0 10.859 4H7a3 3 0 0 0-3 3z"></path></g></svg><span style="color:inherit;font-size:14px;" class="icon-text"><!--[-->Vue<!--]--></span></a><!----></div><div class="theme-reco-default-content"><div><h2 id="常用特性概览" tabindex="-1"><a class="header-anchor" href="#常用特性概览" aria-hidden="true">#</a> 常用特性概览</h2><ol><li>表单操作</li><li>自定义指令</li><li>计算属性</li><li>过滤器</li><li>侦听器</li><li>生命周期</li></ol><h3 id="_1-表单操作" tabindex="-1"><a class="header-anchor" href="#_1-表单操作" aria-hidden="true">#</a> 1. 表单操作</h3><ul><li>基于Vue的表单操作 <ul><li>Input单行文本</li><li>texttarea多行文本</li><li>select下拉多选</li><li>radio单选框</li><li>checkbox多选框</li></ul></li><li>表单域修饰符 <ul><li>number 转化为数值 <code>v-model.number=&#39;xx&#39;</code></li><li>trim 去掉开始和结尾的空格</li><li>lazy 将input事件转换为change</li></ul></li></ul><h3 id="_2-自定义指令" tabindex="-1"><a class="header-anchor" href="#_2-自定义指令" aria-hidden="true">#</a> 2. 自定义指令</h3><blockquote><p>为何需要自定义指令？ <em>内置指令不满足需求</em></p></blockquote><ul><li>自定义指令的语法规则（获取元素焦点）</li></ul><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-focus</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
Vue<span class="token punctuation">.</span><span class="token function">directive</span><span class="token punctuation">(</span><span class="token string">&#39;focus&#39;</span><span class="token punctuation">,</span><span class="token punctuation">{</span>
  <span class="token function-variable function">inserted</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">el</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    el<span class="token punctuation">.</span><span class="token function">focus</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//获取元素焦点</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ul><li>携带参数的自定义指令以及用法 改变背景颜色</li></ul><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{color:orange}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
Vue<span class="token punctuation">.</span><span class="token function">directive</span><span class="token punctuation">(</span><span class="token string">&#39;color&#39;</span><span class="token punctuation">,</span><span class="token punctuation">{</span>
  <span class="token function-variable function">inserted</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">el<span class="token punctuation">,</span>binding</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    el<span class="token punctuation">.</span>style<span class="token punctuation">.</span>backgroundColor <span class="token operator">=</span> bind<span class="token punctuation">.</span>value<span class="token punctuation">.</span>color<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ul><li>局部指令 <code>directives</code>和<code>methods</code>同级</li></ul><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">directives</span><span class="token operator">:</span><span class="token punctuation">{</span>
    <span class="token literal-property property">focus</span><span class="token operator">:</span><span class="token punctuation">{</span>
      <span class="token function-variable function">inserted</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">el</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        el<span class="token punctuation">.</span><span class="token function">focus</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token literal-property property">methods</span><span class="token operator">:</span><span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ul><li>*钩子函数 一个指令定义对象可以提供如下几个钩子函数 (均为可选)： * <ul><li><code>bind</code>：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。</li><li><code>inserted</code>：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。</li><li><code>update</code>：所在组件的 VNode 更新时调用，<strong>但是可能发生在其子 VNode 更新之前</strong>。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。</li><li><code>componentUpdated</code>：指令所在组件的 VNode<strong>及其子 VNode</strong>全部更新后调用。</li><li><code>unbind</code>：只调用一次，指令与元素解绑时调用。</li></ul></li><li>接下来我们来看一下钩子函数的参数 (即<code>el</code>、<code>binding</code>、<code>vnode</code>和<code>oldVnode</code>)。 <ul><li><code>el</code>：指令所绑定的元素，可以用来直接操作 DOM。</li><li><code>binding</code>：一个对象，包含以下 property： <ul><li><code>name</code>：指令名，不包括<code>v-</code>前缀。</li><li><code>value</code>：指令的绑定值，例如：<code>v-my-directive=&quot;1 + 1&quot;</code>中，绑定值为<code>2</code>。</li><li><code>oldValue</code>：指令绑定的前一个值，仅在<code>update</code>和<code>componentUpdated</code>钩子中可用。无论值是否改变都可用。</li><li><code>expression</code>：字符串形式的指令表达式。例如<code>v-my-directive=&quot;1 + 1&quot;</code>中，表达式为<code>&quot;1 + 1&quot;</code></li><li><code>arg</code>：传给指令的参数，可选。例如<code>v-my-directive:foo</code>中，参数为<code>&quot;foo&quot;</code>。</li><li><code>modifiers</code>：一个包含修饰符的对象。例如：<code>v-my-directive.foo.bar</code>中，修饰符对象为<code>{ foo: true, bar: true }</code>。</li><li><code>vnode</code>：Vue 编译生成的虚拟节点。移步<a href="https://v2.cn.vuejs.org/v2/api/#VNode-%E6%8E%A5%E5%8F%A3" target="_blank" rel="noopener noreferrer">VNode API<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a>来了解更多详情。</li><li><code>oldVnode</code>：上一个虚拟节点，仅在<code>update</code>和<code>componentUpdated</code>钩子中可用。</li><li>除了<code>el</code>之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/dataset" target="_blank" rel="noopener noreferrer">dataset<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a>来进行</li><li>这是一个使用了这些 property 的自定义钩子样例：</li></ul></li></ul></li></ul><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>hook-arguments-example<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">v-demo:</span>foo.a.b</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>message<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
Vue<span class="token punctuation">.</span><span class="token function">directive</span><span class="token punctuation">(</span><span class="token string">&#39;demo&#39;</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  <span class="token function-variable function">bind</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">el<span class="token punctuation">,</span> binding<span class="token punctuation">,</span> vnode</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    vars <span class="token operator">=</span><span class="token constant">JSON</span><span class="token punctuation">.</span>stringify
    el<span class="token punctuation">.</span>innerHTML<span class="token operator">=</span>
        <span class="token string">&#39;name: &#39;</span><span class="token operator">+</span><span class="token function">s</span><span class="token punctuation">(</span>binding<span class="token punctuation">.</span>name<span class="token punctuation">)</span> <span class="token operator">+</span><span class="token string">&#39;&lt;br&gt;&#39;</span><span class="token operator">+</span>
        <span class="token string">&#39;value: &#39;</span><span class="token operator">+</span><span class="token function">s</span><span class="token punctuation">(</span>binding<span class="token punctuation">.</span>value<span class="token punctuation">)</span> <span class="token operator">+</span><span class="token string">&#39;&lt;br&gt;&#39;</span><span class="token operator">+</span>
        <span class="token string">&#39;expression: &#39;</span><span class="token operator">+</span><span class="token function">s</span><span class="token punctuation">(</span>binding<span class="token punctuation">.</span>expression<span class="token punctuation">)</span> <span class="token operator">+</span><span class="token string">&#39;&lt;br&gt;&#39;</span><span class="token operator">+</span>
        <span class="token string">&#39;argument: &#39;</span><span class="token operator">+</span><span class="token function">s</span><span class="token punctuation">(</span>binding<span class="token punctuation">.</span>arg<span class="token punctuation">)</span> <span class="token operator">+</span><span class="token string">&#39;&lt;br&gt;&#39;</span><span class="token operator">+</span>
        <span class="token string">&#39;modifiers: &#39;</span><span class="token operator">+</span><span class="token function">s</span><span class="token punctuation">(</span>binding<span class="token punctuation">.</span>modifiers<span class="token punctuation">)</span> <span class="token operator">+</span><span class="token string">&#39;&lt;br&gt;&#39;</span><span class="token operator">+</span>
        <span class="token string">&#39;vnode keys: &#39;</span><span class="token operator">+</span>Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>vnode<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">&#39;, &#39;</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token function">newVue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">el</span><span class="token operator">:</span><span class="token string">&#39;#hook-arguments-example&#39;</span><span class="token punctuation">,</span>
  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">message</span><span class="token operator">:</span><span class="token string">&#39;hello!&#39;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_3-计算属性" tabindex="-1"><a class="header-anchor" href="#_3-计算属性" aria-hidden="true">#</a> 3. 计算属性</h3><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code>computed: {
// 计算属性的 getter
 reversedMessage:function() {
  // this 指向 vm 实例
  returnthis.message.split(&#39;&#39;).reverse().join(&#39;&#39;)
 }
}
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ul><li>为什么需要计算属性？ <ul><li>表达式的计算逻辑可能会比较复杂，使用计算属性可以使模板内容更加简洁 必须return出去</li></ul></li><li>计算属性和方法的区别？ <ul><li>计算属性是基于它们的依赖进行缓存的 <code>依赖指的是data里面的数据</code></li><li>方法不存在缓存</li></ul></li></ul><h3 id="_4-侦听器" tabindex="-1"><a class="header-anchor" href="#_4-侦听器" aria-hidden="true">#</a> 4. 侦听器</h3><ul><li>侦听器的应用场景? <ul><li>数据变化时执行异步或开销较大的操作</li></ul></li><li>侦听器的用法 <em>可以配合<code>v-model.lazy</code>使用</em></li></ul><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code>watch: {
 firstName:function(val) {
  this.fullName= val +&#39; &#39;+this.lastName
 },
 lastName:function(val) {
  this.fullName=this.firstName+&#39; &#39;+ val
 }
}
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_5-过滤器" tabindex="-1"><a class="header-anchor" href="#_5-过滤器" aria-hidden="true">#</a> 5. 过滤器</h3><ul><li>过滤器的作用是？ <ul><li>格式化数据 比如将字符串格式转换为首字母大写/日期转换格式</li></ul></li><li>自定义过滤器 <code>全局过滤器</code></li></ul><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code>//方法1
Vue.filter(&#39;过滤器名称&#39;,function(value,arg1,arg...){
 return xxxxx;
})
//方法2
Vue.filter(&#39;format&#39;,function(value,arg){
  function dataFormat(value,format){//...上面函数}
  return dataFormat(value,arg)
})
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ul><li>过滤器的使用</li></ul><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>{{msg | upper(arg1,args...)}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>{{msg | upper | lower}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>  upper输出的值会在进行lower然后输出结果
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name"><span class="token namespace">v-bind:</span>id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>id | formatId<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ul><li>局部过滤器 <em>和data同一层级 只在当前组件可以使用</em></li></ul><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>&lt;script&gt;
filters:{
  capitalize:function(value,,arg1,arg...){return xxxxx}
}
&lt;/script&gt;
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_6-生命周期" tabindex="-1"><a class="header-anchor" href="#_6-生命周期" aria-hidden="true">#</a> 6. 生命周期</h3><ol><li>主要阶段</li></ol><ul><li>挂载（初始化相关属性） <ol><li>beforeCreate</li><li>created</li><li>beforeMount</li><li>mounted （初始化完成 模板内容已经存在）</li></ol></li><li>更新（元素或组件的变更操作） <ol><li>beforeUpdate</li><li>updated</li></ol></li><li>销毁（销毁相关属性） <ol><li>beforeDestroy</li><li>destroyed 要触发这个要在函数里<code>this.$destroy()</code></li></ol></li></ul><ol start="2"><li>Vue实例的产生过程 <ol><li>beforeCreated在实例初始化之后，数据观测和事件配置之前被调用</li><li>created在实例创建完成后被立即调用</li><li>beforeMount在挂在开始之前被调用</li><li>mounted el被新创建的vm.$el替换，被挂载到实力上去之后调用该钩子</li><li>beforeUpdate 数据更新时调用，发生在虚拟dom打补丁之前</li><li>updated 由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子</li><li>beforeDestory 实例销毁之前调用。</li><li>destroyed实例销毁后调用。组件化开发</li></ol></li></ol></div></div><footer class="page-meta"><div class="meta-item edit-link"><a class="icon-container left meta-item-label" href="https://gitee.com/i77ing/blog.git/edit/master/blogs/Vue/Vue2_2022111204.md" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" style="color:inherit;width:20px;height:20px;font-size:20px;"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 7H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2v-3"></path><path d="M9 15h3l8.5-8.5a1.5 1.5 0 0 0-3-3L9 12v3"></path><path d="M16 5l3 3"></path></g></svg><span style="color:inherit;font-size:14px;" class="icon-text"><!--[-->Edit this page<!--]--></span></a></div><div class="meta-item last-updated"><a class="icon-container left meta-item-label" href="javascript:void(0)" target="_self"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" style="color:inherit;width:20px;height:20px;font-size:20px;"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11.795 21H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v4"></path><circle cx="18" cy="18" r="4"></circle><path d="M15 3v4"></path><path d="M7 3v4"></path><path d="M3 11h16"></path><path d="M18 16.496V18l1 1"></path></g></svg><span style="color:inherit;font-size:14px;" class="icon-text"><!--[-->Last Updated 2023-02-23 19:57:37<!--]--></span></a></div></footer><nav class="page-nav"><p class="hasPrev hasNext inner"><span class="page-nav-item prev"> ← 三、Vue模版语法</span><span class="page-nav-item next">五、组件化开发 → </span></p></nav><!----></main><!--]--><div class="page-catalog-container"><h5 class="tip">ON THIS PAGE</h5><ul><!--[--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/blogs/Vue/Vue2_2022111204.html#常用特性概览" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="常用特性概览"><!--[--><!--]--> 常用特性概览 <!--[--><!--]--></a></li><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blog/blogs/Vue/Vue2_2022111204.html#_1-表单操作" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="1. 表单操作"><!--[--><!--]--> 1. 表单操作 <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blog/blogs/Vue/Vue2_2022111204.html#_2-自定义指令" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="2. 自定义指令"><!--[--><!--]--> 2. 自定义指令 <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blog/blogs/Vue/Vue2_2022111204.html#_3-计算属性" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="3. 计算属性"><!--[--><!--]--> 3. 计算属性 <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blog/blogs/Vue/Vue2_2022111204.html#_4-侦听器" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="4. 侦听器"><!--[--><!--]--> 4. 侦听器 <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blog/blogs/Vue/Vue2_2022111204.html#_5-过滤器" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="5. 过滤器"><!--[--><!--]--> 5. 过滤器 <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blog/blogs/Vue/Vue2_2022111204.html#_6-生命周期" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="6. 生命周期"><!--[--><!--]--> 6. 生命周期 <!--[--><!--]--></a></li><!--]--><!--]--><!--]--></ul></div></div></div></div><!----><!----><!--]--></div>
    <script type="module" src="/blog/assets/app.af94fc38.js" defer></script>
  </body>
</html>
